<template>
  <div style="background-color: rgb(4,84,172);color:white;">
    <!--封装组件头部-->
    <div class="main-box">
      <div class="left-box" @click="goIndex">
        <div class="image-box">
          <img class="logo-box" src="@/assets/927e935e440e345d468cab8063597f5.png" alt="" srcset="">
        </div>
        <div class="title-box height-center" style="cursor:pointer;">企业评分网</div>
      </div>
      <div class="right-box height-center">
        <ul>
          <li @click="goentCom" style="cursor:pointer;">企业列表</li>
          <li @click="goPulish" style="cursor:pointer;">我要爆料</li>
          <li>
            <div v-if="isLogin === false">
              <el-button class="small-btn" type="primary" size="small" @click="loginBtn"> 登录 | 注册</el-button>
            </div>
            <div @click="logout" v-if="isLogin === true" class="user-info" style="display: flex">
              <div>
                <el-avatar
                    :src="imgUrl"
                    :size="40"
                ></el-avatar>
              </div>
              <div style="display: flex;align-items: center;margin-left: 5px">
                {{ userinfoList.nickName }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 登录的弹出框-->
    <div class="loginModel">
      <el-dialog
          custom-class="coustomWidth"
          class="login-width"
          :visible.sync="loginlogVisible"
          width="360px"
      >
        <div class="loginContent" style="padding-top: 0">
          <el-tabs type="border-card">
            <!-- 账号密码登录-->
            <el-tab-pane label="账号密码登录">
              <!--表单密码登录-->
              <el-form ref="form" :model="loginPassword" label-width="80px">
                <el-form-item>
                  <el-input v-model="loginPassword.phoneNumber" placeholder="请输入登录账号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="loginPassword.password" placeholder="请输入登陆密码"
                            type="password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="passwordLoginbtn">立即登录</el-button>
                </el-form-item>
                <el-form-item style="margin: 0">
                  <el-button type="text" @click="singupNow">立即注册</el-button>
                  <el-button type="text" style="float: right" @click="forgotPassword">忘记密码？</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="手机号登录">
              <!--手机号登录-->
              <el-form ref="form" :model="loginPhone" label-width="80px">
                <el-form-item>
                  <el-input v-model="loginPhone.phoneNumber" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <el-col :span="15">
                      <div class="grid-content bg-purple">
                        <el-form-item>
                          <el-input placeholder="请输入四位验证码" v-model="loginPhone.code"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple-light">
                        <el-button type="primary" plain @click="phoneCode" :disabled="isCountingDown">
                          {{ isCountingDown ? `${countdown} 秒重新获取` : '获取验证码' }}
                        </el-button>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="phoneLoginbtn">立即登录</el-button>
                </el-form-item>
                <el-form-item style="margin: 0">
                  <el-button type="text" @click="singupNow">立即注册</el-button>
                  <el-button type="text" style="float: right" @click="forgotPassword">忘记密码？</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </div>
    <!-- 注册弹出框-->
    <div class="registerBox">
      <el-dialog
          :visible.sync="dialogRegister"
          width="360px"
      >
        <!--弹出框内容-->
        <div class="loginContent">
          <el-tabs type="border-card">
            <el-form :model="registerList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <!--              <el-form-item label="" prop="username">-->
              <!--                <el-input v-model="registerList.nickName" placeholder="用户名称"></el-input>-->
              <!--              </el-form-item>-->
              <el-form-item label="" prop="password">
                <el-input v-model="registerList.password" placeholder="密码" type="password"></el-input>
              </el-form-item>
              <el-form-item label="" prop="passwordReg">
                <el-input v-model="registerList.passwordReg" placeholder="再次输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item abel="" prop="phoneNumber">
                <el-input v-model="registerList.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item l>
                <el-row>
                  <el-col :span="15">
                    <div class="grid-content bg-purple">
                      <el-form-item>
                        <el-input placeholder="请输入四位验证码" v-model="registerList.code"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-button type="primary" plain @click="regCode" :disabled="isCountingDown">
                        {{ isCountingDown ? `${countdown} 秒重新获取` : '发送验证码' }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="regBtn">立即注册</el-button>
              </el-form-item>
              <el-form-item style="margin: 0">
                <el-button type="text" @click="loginNow">立即登录</el-button>
              </el-form-item>
            </el-form>
          </el-tabs>
        </div>
        <span slot="footer" class="dialog-footer">
          </span>
      </el-dialog>
    </div>
    <!--重置密码弹出框-->
    <div class="forgetBox">
      <el-dialog
          :visible.sync="dialogForget"
          width="360px"
          :before-close="handleCloseforget">
        <!-- 弹出框内容·-->
        <div class="forgetBox">
          <el-card class="box-card">
            <el-form ref="form" :model="forgetList" label-width="80px">
              <el-form-item>
                <el-input v-model="forgetList.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="16">
                    <div class="grid-content bg-purple">
                      <el-form-item>
                        <el-input placeholder="请输入四位验证码" v-model="forgetList.code"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-button type="primary" plain @click="forgetCode" :disabled="isCountingDown">
                        {{ isCountingDown ? `${countdown} 秒重新获取` : '获取验证码' }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-input v-model="forgetList.password" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="forgetList.passwordGet" type="password" placeholder="请确认密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="changePassword">确认修改</el-button>
              </el-form-item>
              <el-form-item style="margin: 0">
                <el-button type="text" @click="loginNow">立即登录</el-button>
              </el-form-item>
            </el-form>
            <!--            </el-tab-pane>-->
          </el-card>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {changePassword, forceLogout, getCode, login, personal, reg} from "@/api/login";

export default {
  name: "indexHeader",
  data() {
    return {
      isLogin: false,
      loginPhone: {
        phoneNumber: '',
        code: ''
      },
      //登录
      loginlogVisible: false,
      // 传递参数
      paramsa: {
        pageNum: 1,
        pageSize: 20
      },
      // 倒计时
      countdown: 60,
      isCountingDown: false,
      // 忘记密码 弹出框
      dialogForget: false,
      // 验证码
      yanzhengma: '',
      // 退出
      dialogVisibleQuit: false,
      // 企业搜索
      companyName: '',
      // 手机号登录
      // 密码登录
      loginPassword: {
        phoneNumber: '',
        password: '',
      },
      activeIndex: '1',
      activeIndex2: '1',
      dialogRegister: false,
      registerList: {
        passwordReg: '',
        // nickName: '',
        phoneNumber: '',
        password: "",
        // nickname: '',
        code: ''
      },
      // 注册验证
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          // {min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 100, message: '密码至少八位', trigger: 'blur'}
        ],
        passwordReg: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {min: 8, max: 100, message: '密码至少八位', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 0, max: 100, message: '无限制', trigger: 'blur'}
        ],
      },
      //获取手机好
      phoneList: {
        phoneNumber: '',
        captcha: ''
      },
      // 忘记密码
      forgetList: {
        passwordGet: '',
        phoneNumber: '',
        password: '',
        code: ''
      },
      userinfoList: {},
      URL: 'https://www.qipingwang123.com/prod-api',
      imgUrl: ''
    }
  },
  created() {
    this.getPersonal()
    this.getLoginin()
    this.getUser()
  },
  computed: {
    nickName: function () {
      return JSON.parse(localStorage.getItem("userInfo")).nickName();
    }
  },
  methods: {
    async logout() {
      this.$confirm('是否退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        forceLogout().then(res => {
          console.log(res, 'layout')
          if (res.code == 200) {
            location.reload();
            this.$store.commit('changeisLogin', 100)
            let layoutToken = ''
            this.$store.commit('settingToken', layoutToken)
          }
        })
      }).catch(() => {
      });
    },
    // 获取用户信息
    getUser() {
      if (localStorage.getItem("isLogin") == true) {
        this.userinfoList = JSON.parse(localStorage.getItem("userInfo"));
        this.imgUrl = this.URL + this.userinfoList.imgUrl
        console.log(this.imgUrl)
      }

    },
    getLoginin() {
      console.log(JSON.parse(localStorage.getItem("isLogin")), '111111')
      if (JSON.parse(localStorage.getItem("isLogin")) == true) {
        this.isLogin = true;
      } else {
        this.isLogin = false
      }
    },
    // 获取个人信息
    getPersonal() {
      personal().then(res => {
        if (res.code == 200) {
          console.log(res, 'user')
          let userinfo = JSON.stringify(res.data)
          this.$store.commit('changeUserInfo', userinfo)
          // 登录状态存储
          this.$store.commit('changeisLogin', res.code)
          this.userinfoList = JSON.parse(localStorage.getItem("userInfo"));
          this.imgUrl = this.URL + this.userinfoList.imgUrl
        } else {
          this.$store.commit('changeisLogin', res.code)
          this.userinfoList = JSON.parse(localStorage.getItem("userInfo"));
          this.userinfoList = JSON.parse(localStorage.getItem("userInfo"));
          this.imgUrl = this.URL + this.userinfoList.imgUrl
        }
      })
    },
    // 手机号登录
    phoneLoginbtn() {
      login(this.loginPhone).then(res => {
        if (res.code == 200) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong style="margin-right: 100px">恭喜你，登陆成功！</strong>',
            type: 'success'
          });
          this.loginlogVisible = false
          this.$store.commit('settingToken', res.token)
          this.$store.commit('changeisLogin', res.code)
          location.reload();
          this.getPersonal()
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong style="margin-right: 100px">账号/验证码存在错误！</strong>',
            type: 'error'
          });
        }
      })
    },
    // 确认修改
    changePassword() {
      changePassword(this.forgetList).then(res => {
        if (res.code == 200) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong style="margin-right: 100px">修改成功！</strong>',
            type: 'success'
          });
          this.dialogForget = false
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    // 忘记密码获取code
    forgetCode() {
      this.getMessage(this.forgetList.phoneNumber)
    },
    // 注册获取验证码
    regCode() {
      this.getMessage(this.registerList.phoneNumber)
    },
    // 手机号登录获取验证码
    phoneCode() {
      this.getMessage(this.loginPhone.phoneNumber)
    },
    // 注册账号
    regBtn() {
      // 静态判断两次密码
      if (this.registerList.password === this.registerList.passwordReg) {
        let obj = {
          code: this.registerList.code,
          phoneNumber: this.registerList.phoneNumber,
          password: this.registerList.password,
        }
        // 点击注册时验证码校验
        reg(obj).then((res) => {
          if (res.code == 200) {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<strong style="margin-right: 100px">恭喜你，注册成功！</strong>',
              type: 'success'
            });
            console.log(res, 'rrrrr')
            //   token res.token
            this.dialogRegister = false
            // 存储token 更改登录状态
            this.$store.commit('settingToken', res.token)
            this.$store.commit('changeisLogin', res.code)
            setTimeout(function () {
              personal().then(res => {
                console.log(res)
                location.reload();
              })
            }, 1000)
          } else {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'error'
            });
          }
        })
      } else {
        window.alert("两次密码不同！")
      }


    },
    // 账号密码登录
    passwordLoginbtn() {
      login(this.loginPassword).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.msg,
            type: 'success'
          });
          location.reload();
          this.loginlogVisible = false
          this.$store.commit('settingToken', res.token)
          this.$store.commit('changeisLogin', res.code)
          this.getPersonal()
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    handleCloseforget() {
      this.dialogForget = false
    },
    // 忘记密码
    forgotPassword() {
      this.loginlogVisible = false
      this.dialogForget = true
    },
    // 立即注册 Sign up
    singupNow() {
      this.loginlogVisible = false;
      this.dialogRegister = true;
    },
    // 立即登录
    loginNow() {
      this.dialogForget = false;
      this.dialogRegister = false;
      this.loginlogVisible = true;
    },
    // 获取验证码通用
    getMessage(data) {
      if (!this.isCountingDown) {
        // 发送验证码的逻辑
        getCode(data).then(res => {
          console.log(res, 'code')
          if (res.code == 200) {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: res.msg,
              type: 'error'
            });
          }
        })
        this.isCountingDown = true;
        this.startCountdown();
      }
    },
    // 倒计时函数
    startCountdown() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
          this.isCountingDown = false;
          this.countdown = 60;
        }
      }, 1000);
    },
    // 立即登录
    loginBtn() {
      this.$router.push({
        path: '/login'
      })
      // this.loginlogVisible = true
    },
    // 跳转转企业列表
    goentCom() {
      let routername = this.$router.currentRoute.name
      if (routername === 'entcom') {
        return 0
      } else {
        this.$router.push({path: "/entcom"})
      }
    },
    // 跳转发布企业
    goPulish() {
      let routername = this.$router.currentRoute.name
      if (routername === 'pulish') {
        return 0
      } else {
        this.$router.push({path: "/pulish"})
      }
    },
    // 跳转首页
    goIndex() {
      let routername = this.$router.currentRoute.name
      if (routername === 'index') {
        return 0
      } else {
        this.$router.push({path: "/"})
      }
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
}

.height-center {
  display: flex;
  align-items: center;
}

.main-box {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 80%;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
}

::v-deep .el-dialog__headerbtn {
  top: 10px;
}

::v-deep .el-dialog__footer {
  padding: 0 !important;
}

.left-box {
  height: 56px;
  display: flex;
  margin-left: 0;
}

.right-box {
  margin-right: 0;
}

.image-box {
  margin-right: 20px;
  margin-top: 10px;
  width: 40px;
  height: 40px;

  .logo-box {
    width: 100%;
    height: 100%;
  }
}


ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

li {
  margin-left: 20px;
  display: flex;
  align-items: center;
}

a {
  text-decoration: none;
  color: black;
}

.indexBox:hover {
  cursor: pointer;
}

::v-deep .el-message--warning {
  padding-left: 100px;
}

.forgetBox {
  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

}

.quitBox {
  ::v-deep .el-dialog__body {
    height: 0;
    padding: 0;
  }

  ::v-deep .el-dialog__footer {
    width: 100%;
    margin: auto;
    text-align: center;
  }
}

.userBox {
  text-align: center;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;

  div {
    height: 15px;
  }
}

.registerBox {
  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
    text-align: center;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 50%;
  }
}

.loginModel {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
    text-align: center;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 50%;
  }

}

::v-deep .el-menu--horizontal > .el-menu-item {
  color: white;
}

::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  color: white;
}

.littleFont {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}


* {
  margin: 0 auto;
}

.hotBox {
  margin-top: 20px;
  display: flex;
}

::v-deep .ant-tabs-nav {
  margin-left: 100px;
}

.hotEnterprises {
  display: inline-block;
  width: 786px;
  height: 56px;
  vertical-align: top;
  text-align: left;

  a {
    display: inline-block;
    vertical-align: top;
    margin-right: 24px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 22px;
    color: #e0e0e0;
  }
}

.hotTitle {
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 32px;
  padding-top: 5px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 4px;
  text-indent: 4px;
  line-height: 22px;
  background: hsla(0, 0%, 100%, .16);
}


::v-deep .ant-tabs-nav-scroll {
  border: none;
}

.titleBox {
  width: 650px;
  display: inline-block;
  margin-bottom: 33px;
  margin-top: 40px;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 8px;
  text-indent: 7px;
  color: #fff;
}


* {
  margin: 0 auto;
}


.flexBoxleft {
  display: flex;
  align-items: center;
  margin-left: 0px;
}

::v-deep .el-menu-demo:hover {
  background-color: #0454ac !important;
}

.flexBoxright {
  ::v-deep .el-menu-demo {
    background-color: #0454ac !important;
  }

  .flexBoxright:hover {
    background-color: #0454ac !important;
  }

  display: flex;
  align-items: center;
  margin-right: 0px;
}

.el-form-item {
  margin-bottom: 20px;
}

@media screen and (max-width: 1000px) {
  .main-box {
    font-size: 12px;
  }

  ul {
    padding-left: 0;
  }

  li {
    margin-left: 0;
  }

  /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .el-input-group__append {
    border: none;
    width: 25px;
    padding: 5px !important;
    font-size: 0.6rem;
  }

  .main-box {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 80%;
    font-size: 0.6rem;
  }

  .small-btn {
    font-size: 0.5rem;
    padding: 5px 10px;
  }
}

</style>